<template>
  <div class="wrap">
    <myHead :title="pageTitle"></myHead>
    <div class="boxWrap">
      <div class="rm-qzqw" @click="edit('工作经历',0)">
        <div class="rm-tit" >工作经历</div>
        <div class="rm-bot">
          <p>{{occupational_history ? occupational_history.undergo:content[0].name}}</p>
        </div>
      </div>
      <div class="rm-qzqw" @click="edit('职位名称',1)">
        <div class="rm-tit" >职位名称</div>
        <div class="rm-bot">
          <p>{{occupational_history ? occupational_history.position:content[1].name}}</p><img src="../../../static/img/youjiantou003.png" alt="">
        </div>
      </div>
      <div class="rm-qzqw" @click="showStart = true">
        <div class="rm-tit" >在职时间</div>
        <div class="rm-bot">
          <p>{{occupational_history ? occupational_history.entrytime+"-"+occupational_history.departuretime:time}}</p><img src="../../../static/img/youjiantou003.png" alt="">
        </div>
      </div>
      <div class="rm-qzqw" @click="edit('工作描述',2)">
        <div class="rm-tit" >工作描述</div>
        <div class="rm-bot">
          <p>{{occupational_history ? occupational_history.content:content[2].name}}</p><img src="../../../static/img/youjiantou003.png" alt="">
        </div>
      </div>
    </div>
    <div class="btn" @click="save">保存</div>
    <van-dialog v-model="show" :title="title" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button @confirm="submit(index)">
      <input class="dialog" type="text" :placeholder="placeholder" v-model="value" />
    </van-dialog>
    <van-popup v-model="showStart" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
      v-model="currentDate"
      type="year-month"
      title="入职时间"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatter"
      @cancel="cancelStart"
      @confirm="confirmStart"
    />
    </van-popup>
    <van-popup v-model="showEnd" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="离职时间"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="cancelEnd"
        @confirm="confirmEnd"
      />
    </van-popup>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import Vue from 'vue';
  import { DatetimePicker,Popup } from 'vant';

  Vue.use(Popup);
  Vue.use(DatetimePicker);

  export default {
    name: "setWorkExperience",
    components: {
      myHead
    },
    data(){
      return{
        pageTitle:"添加工作经历",
        show:false,
        showStart:false,
        showEnd:false,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2020, 12, 31),
        currentDate: new Date(),
        placeholder:"",
        title:"工作经历",
        index:0,
        time:'2016/08 - 2018/09',
        startTime:"",
        endTime:"",
        content:[{
          name:"公司名称", //工作经历
        },{
          name:"如：现场维护", //职位名称
        },{
          name:"请描述该职位的主要工作内容", //工作描述
        }],
        value:"",
        occupational_history:false,
      }
    },
    created() {
      if(this.$route.query.id == 0){
        console.log("添加工作经历");
      }else{
        this.pageTitle = "编辑工作经历";
        this.$myAxios('index/Resume/undergo', 'post', {
          user_id:this.$myStorage.query(),
          undergo_id:this.$route.query.id,
        }).then(res => {
          console.log(res);
          if(res.data.state == 1){
            this.occupational_history = res.data.occupational_history
          }else{
            this.$myNotice("网络连接中断...",2000);
            this.$router.back();
          }
        });
      }
    },
    methods:{
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        }
        return val;
      },
      edit:function (title,index) {
        this.title = title;
        this.index = index;
        this.placeholder = this.content[index].name;
        this.show = true;
      },
      jump(page){
        this.$router.push({
          name:page
        })
      },
      confirmStart(value){
        console.log(value);
        let date = new Date(value);
        this.startTime = date.getFullYear() + '/' + (date.getMonth() + 1);
        console.log(this.startTime);
        this.showStart = false;
        this.showEnd = true;
      },
      confirmEnd(value){
        let date = new Date(value);
        this.endTime = date.getFullYear() + '/' + (date.getMonth() + 1);
        this.time = this.startTime + "-" +this.endTime;
        this.showEnd = false;
      },
      cancelStart(){
        this.showStart = false;
      },
      cancelEnd(){
        this.showEnd = false;
      },
      submit:function (index) {
        this.content[index].name = this.value;
        this.placeholder = "";
        this.value = "";
      },
      save(){
        let data = {
          user_id:this.$myStorage.query(),
          undergo:this.content[0].name,
          position:this.content[1].name,
          entrytime:this.startTime,
          departuretime:this.endTime,
          content:this.content[2].name,
        };
        if(this.$route.query.type == 1){
          this.$myAxios('index/Resume/undergo_update', 'post', {
            data,
            undergo_id:0,
          }).then(res => {
            console.log(res);
            if(res.data.state == 1){
              this.$myNotice("更新成功",2000);
              this.$router.back();
            }else{
              this.$myNotice("网络连接中断...",2000)
            }
          });
        }else{
          this.$myAxios('index/Resume/undergo_add', 'post', data).then(res => {
            console.log(res);
            if(res.data.state == 1){
              this.$myNotice("添加成功",2000);
              this.$router.back();
            }else{
              this.$myNotice("网络连接中断...",2000)
            }
          });
        }

      },
      setMsg(page,title,rightText,maxLength,rows,data){
        this.$router.push({
          name:page,
          query:{
            title,
            rightText,
            maxLength,
            rows,
            data
          }
        })
      }

    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 6.67rem;
    box-sizing: border-box;
    padding-top: .5rem;
  }

  .boxWrap {
    padding: 0 .15rem 0;
  }
  .rm-qzqw {
    height: .8rem;
    box-sizing: border-box;
    border-bottom: .01rem solid #EEEEEE;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0 .1rem;
  }
  .rm-tit {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
    margin-bottom: .1rem;
  }

  .rm-qzqw-bot>img {
    width: .08rem;
    height: .14rem;
  }
  .rm-qzqw-bot>div>p:nth-child(1) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    margin-bottom: .1rem;
  }
  .rm-qzqw-bot>div>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .rm-qzqw-bot2>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .rm-qzqw-bot2>div>img {
    width: .08rem;
    height: .14rem;
    margin-left: .1rem;
  }
  .rm-qzqw-bot2>div>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    margin-bottom: 0 !important;
  }
  .rm-gzjl>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:.24rem;
  }
  .rm-bot {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .rm-bot>img {
    width: .06rem;
    height: .11rem;
  }
  .rm-bot>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .btn {
    width:3.24rem;
    height:.44rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.22rem;
    text-align: center;
    line-height: .44rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FFFFFF;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    margin: auto;
  }
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
</style>
